<template>
  <div class="nikeName">
    <!-- 用户 昵称 头部 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="修改昵称">
      <van-icon slot="left" name="arrow-left" @click="colsePopup" />
    </van-nav-bar>
    <!-- 用户修改昵称 文本框 -->
    <van-field
      class="post-field"
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="11"
      placeholder="请输入昵称"
      show-word-limit
    />
    <van-button
      class="btn"
      type="primary"
      size="small"
      @click="publishNikeName"
    >
      确认修改
    </van-button>
  </div>
</template>

<script>
// 导入 修改昵称接口
import { editUserProfile } from '@/api/user.js'
export default {
  name: 'userNikeName',
  components: {},
  props: {
    nikeName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      message: this.nikeName
    }
  },
  created() {},
  methods: {
    colsePopup() {
      this.$emit('onClose')
    },
    async publishNikeName() {
      try {
        // 如果 输入框的 数据 与服务器中的 数据 是一样的 那么就 不用发出 请求。
        if (this.message !== this.nikeName) {
          const { data } = await editUserProfile({ name: this.message })
          console.log(data)
          // 将修改成功的数据 更新到 视图上面
          // 传输到 父组件
          this.$emit('changeView', this.message)
          // 成功 弹出 消息
          this.$toast.success('修改成功')
        }
      } catch (err) {
        this.$toast.fail('修改失败')
      }
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.nikeName {
  .btn {
    margin-left: 80%;
  }
}
</style>
